<!-- src/views/help/index.vue -->
<template>
  <div class="help-container">
    <el-card>
      <template #header>
        <h2>帮助中心</h2>
      </template>

      <el-alert
        title="这是一个静态菜单示例"
        type="info"
        :closable="false"
        show-icon
        style="margin-bottom: 20px"
      >
        <p>此页面不需要后端返回权限，所有登录用户都能看到。</p>
      </el-alert>

      <el-divider content-position="left">使用文档</el-divider>

      <el-collapse accordion>
        <el-collapse-item title="如何添加静态菜单？" name="1">
          <p>在 <code>src/router/routes/async.js</code> 的 <code>staticMenus</code> 数组中添加配置：</p>
          <pre class="code-block">
const staticMenus = [
  {
    path: "help",
    name: "Help",
    component: () => import("@/views/help/index.vue"),
    meta: { 
      title: "帮助中心", 
      icon: "document",
      static: true,  // 必须标记为 true
      sort: 100      // 可选：控制显示顺序
    }
  }
];
          </pre>
        </el-collapse-item>

        <el-collapse-item title="静态菜单 vs 动态菜单" name="2">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="静态菜单">
              不需要后端返回权限，所有登录用户都能看到
            </el-descriptions-item>
            <el-descriptions-item label="动态菜单">
              需要后端返回权限，根据用户角色显示
            </el-descriptions-item>
            <el-descriptions-item label="适用场景">
              帮助中心、个人中心、关于我们等通用页面
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>

        <el-collapse-item title="常见问题" name="3">
          <ul style="line-height: 2">
            <li><strong>Q: 静态菜单会被后端权限覆盖吗？</strong><br>
                A: 不会，静态菜单始终显示，不受后端权限控制。</li>
            <li><strong>Q: 可以设置静态菜单的显示顺序吗？</strong><br>
                A: 可以，通过 <code>meta.sort</code> 字段控制。</li>
            <li><strong>Q: 静态菜单可以有子菜单吗？</strong><br>
                A: 可以，在 <code>children</code> 中配置子菜单即可。</li>
          </ul>
        </el-collapse-item>
      </el-collapse>

      <el-divider content-position="left">快速链接</el-divider>

      <el-space wrap>
        <el-button type="primary" @click="goToDoc('auto-router')">
          自动路由文档
        </el-button>
        <el-button type="success" @click="goToDoc('permission')">
          权限控制文档
        </el-button>
        <el-button type="info" @click="goToDoc('router-demo')">
          路由演示页面
        </el-button>
      </el-space>
    </el-card>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();

const goToDoc = (type) => {
  const docMap = {
    'auto-router': 'AUTO_ROUTER.md',
    'permission': 'PERMISSION_MENU.md',
    'router-demo': '/routerPage'
  };

  if (type === 'router-demo') {
    router.push(docMap[type]);
  } else {
    ElMessage.info(`请查看项目根目录的 ${docMap[type]} 文件`);
  }
};
</script>

<style scoped>

.code-block {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  margin: 10px 0;
}

code {
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  color: #e96900;
}

ul {
  padding-left: 20px;
}

ul li {
  margin: 10px 0;
}
</style>
